<template>
  <div id="map" @dblclick="handleDbClick()">地图</div>
</template>

<script>
import mixin from "../utils/mixin";
import { getProvinceMapInfo } from "../utils/map_utils";
export default {
  mixins: [mixin],
  computed: {
    option() {
      return {
        title: {
          text: "┃ 商家分布",
          left: this.baseSize / 4,
          top: this.baseSize / 4,
          textStyle: {
            fontSize: this.baseSize,
          },
        },
        geo: {
          type: "map",
          map: "china",
          top: "5%",
          bottom: "5%",
          itemStyle: {
            areaColor: "#2e72bf",
            borderColor: "#333",
          },
        },
        series: this.seriesArr,
        legend: {
          data: this.legendArr,
          left: "5%",
          bottom: "5%",
          orient: "vertical",
          itemWidth: this.baseSize / 2,
          itemHeight: this.baseSize / 2,
          textStyle: {
            fontSize: this.baseSize / 4,
          },
          itemGap: this.baseSize / 2,
        },
      };
    },
  },
  data() {
    return {
      seriesArr: null,
      legendArr: null,
    };
  },
  mounted() {
    this.init("map", "api/map/china");
    this.myChart.on("click", this.showProvince);
    this.renderChart();
  },
  methods: {
    dealData() {
      // console.log(this.originData);
      // 注册地图
      this.$echarts.registerMap("china", this.originData);
      this.tools1();
    },
    // 获取散点数据,更新到option
    tools1() {
      this.$axios.get("api/map").then((res) => {
        let data = res.data;
        this.legendArr = [];
        this.seriesArr = data.map((item) => {
          this.legendArr.push(item.name);
          return {
            // 一个类别的所有散点数据
            // 使用地图坐标
            type: "effectScatter",
            name: item.name,
            data: item.children,
            coordinateSystem: "geo",
            rippleEffect: {
              scale: 5,
              brushType: "stroke",
            },
          };
        });
        this.updateChart();
      });
    },
    //
    showProvince(arg) {
      let province = getProvinceMapInfo(arg.name);
      if (!province) return;
      this.$axios.get("api/map/province/" + province).then((res) => {
        this.$echarts.registerMap(province, res.data);
        this.option.geo.map = province;
        this.updateChart();
      });
    },
    handleDbClick() {
      this.option.geo.map = "china";
      this.updateChart();
    },
  },
};
</script>

<style lang="less" scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>